<template>
  <div>
      <table align="center">
        <tr>
           用户名<td>
              <input type="text"  v-model="loingData.userName" />
           </td>
        </tr>
        <tr>
            密码<td>
              <input type="password"  v-model="loingData.userPwd" />
            </td>
        </tr>
        <tr>
            <td>
              <input type="button" value="登录" @click="login"  />
            </td>
        </tr>
      </table>
  </div>
</template>

<script setup lang="ts">

  import {reactive,toRefs}  from 'vue';
import router from '../router';

let data=reactive({

  loingData:{
    userName:'',
    userPwd:''
  }

})

let {loingData}=toRefs(data);

const login=()=>{
  if (loingData.value.userName=='') {
    return alert('用户名不能为空');
  }
  if (loingData.value.userPwd=='') {
    return alert('密码不能为空');
  }
  if (loingData.value.userPwd=='Admin123' && loingData.value.userName=='Admin123') {

    router.push({
      path:'/dem',
      query:{
        userName:loingData.value.userName,
        userPwd:loingData.value.userPwd
      }

    });
  }

}



</script>

<style scoped>

</style>